<template>
	<view>
		<template>
			<u-popup v-bind="$attrs" v-on="$listeners" mode="bottom" border-radius="14" height="80%">
				<view class="u-flex button-style">
					<view class="middle-text can-button" @click="show=false">取消</view>
					<view class="middle-text sub-button" @click="show=false">确定</view>
				</view>

				<view class="my-form add-cantact-person">
					<template>
						<view class="contact-person-form">
							<u-form :model="form" ref="uForm" label-width="150rpx" label-align="right">
								<u-form-item label="姓名：">
									<u-input v-model="form.name" />
								</u-form-item>
								<u-form-item label="手机号：">
									<u-input v-model="form.intro" />
								</u-form-item>
								<u-form-item label="证件类型：">
									<u-input v-model="form.sex" type="select" />
								</u-form-item>
								<u-form-item label="证件号码：">
									<u-input v-model="form.intro" />
								</u-form-item>
							</u-form>
						</view>
					</template>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			model:{
				required:true,
				type:Object
			}
		},
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: '',
				},
				show: true,
			}
		},
		methods: {

		},
		watch: {
			model: {
				deep: true,
				handler(val) {
					this.form = {
						...val
					}
					console.log(val,"form")
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.can-button {
		color: #838383
	}

	.sub-button {
		color: #178975
	}

	.middle-text {
		font-size: 32rpx;
	}

	.add-cantact-person {}

	.button-style {
		justify-content: space-between;
		padding: 25rpx;
		border-radius: 16rpx 16rpx 0 0;
		background: #F9F9F9;

	}

	.contact-person-form {
		padding-top: 40rpx;
	}

	::v-deep .u-drawer {
		z-index: 10075 !important;

		.u-mask {
			z-index: 10075 !important;

			.u-drawer-content {
				z-index: 10075 !important;
			}
		}
	}
</style>
